<template>
  <div>
    <div v-if="['text', 'multiText', 'number', 'dateTime'].includes(type)">{{showName}}</div>
    <div v-else-if="['radio'].includes(type)">{{radioShowName}}</div>
    <div v-else-if="['checkbox'].includes(type)">{{multipleShowName}}</div>
    <div v-else-if="['cascadeSelect'].includes(type)">{{cascadeSelectShowName}}</div>
    <div v-else-if="['member'].includes(type)">{{memberShowName}}</div>
    <div v-else-if="['department'].includes(type)">{{departmentShowName}}</div>
    <div v-else-if="['accessory'].includes(type)">
      <p v-for="(item, index) in showName" :key="index">
        <a v-if="isPicture(item.fileName)" :href="item.url" target="_blank" download>{{ item.fileName }}</a>
        <a v-else :href="item.url.replace('http://', 'https://') + '?attname=' + item.fileName" target="_blank" download>{{ item.fileName }}</a>
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { CommonModule } from '@/store/modules/common'
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore'

@Component({
  name: 'CustomDisplay'
})
export default class CustomDisplay extends Vue {
  @Prop({ default: () => ({}) }) private data!: any
  @Prop({ default: () => ({}) }) private fieldProp!: any
  private get type () {
    return this.fieldProp.field.fieldType
  }

  private get showName () {
    return this.data[this.fieldProp.field.businessId]
  }

  private get radioShowName () {
    if (this.type === 'radio') {
      let result = ''
      const options = this.fieldProp.field.options
      options.forEach(item => {
        if (item.key === this.showName) {
          result = item.value
        }
      })
      return result
    }
  }

  private get multipleShowName () {
    if (this.type === 'checkbox') {
      const result: any[] = []
      const options = this.fieldProp.field.options
      options.forEach(item => {
        if (Array.isArray(this.showName)) {
          this.showName.forEach(x => {
            if (item.key === x) {
              result.push(item.value)
            }
          })
        }
      })
      return result.join('、')
    }
  }

  private get cascadeSelectShowName () {
    if (this.type === 'cascadeSelect') {
      const result: any[] = []
      const options = this.fieldProp.field.cascadeOptions
      const cascadeMap = this.formateCascadeSele(options)
      if (Array.isArray(this.showName)) {
        this.showName.forEach(item => {
          if (item === cascadeMap[item].key) {
            result.push(cascadeMap[item].value)
          }
        })
      }
      return result.join('/')
    }
  }

  private formateCascadeSele (val: any[], obj: any = {}) {
    val.forEach(item => {
      obj[item.key] = item
      if (Array.isArray(item.children) && item.children.length) {
        this.formateCascadeSele(item.children, obj)
      }
    })
    return obj
  }

  private get memberShowName () {
    if (this.type === 'member') {
      return CommonModule.publicCache.userListObj[this.showName] ? CommonModule.publicCache.userListObj[this.showName].name : ''
    }
  }

  private get departmentShowName () {
    if (this.type === 'department') {
      if (CommonModule.publicCache.departmentListObj[this.showName]) {
        return CommonModule.publicCache.departmentListObj[this.showName].name
      } else if (CommonModule.publicCache.queueListObj[this.showName]) {
        return CommonModule.publicCache.queueListObj[this.showName].name
      } else if (busConfigStore.serviceMap[this.showName]) {
        return busConfigStore.serviceMap[this.showName].name
      } else {
        return ''
      }
    }
  }

  private isPicture (fileName) {
    if (fileName.split('.')[1]) {
      const type = fileName.split('.')[1]
      const pictureType = ['png', 'jpg', 'jpeg', 'gif']
      return pictureType.includes(type)
    } else {
      return false
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
